<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>diffing算法及key的选择</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        class Personlist extends React.Component {
            state = {
                persons: [
                    {
                        id: '0001',
                        name: 'Andy',
                        age: 29
                    },
                    {
                        id: '0010',
                        name: 'Lucy',
                        age: 41
                    }
                ]
            }
            render(){
                const { persons } = this.state
                return (
                    <div>
                        <h3>以 index 为 key 的 list</h3>
                        <ul>
                            {persons.map((item, index) => {
                                return <li key={index}>name: {item.name}, age: {item.age} <input type="text"/></li>
                            })}
                        </ul>
                        <h3>以 id 为 key 的 list</h3>
                        <ul>
                            {persons.map((item, index) => {
                                return <li key={item.id}>name: {item.name}, age: {item.age} <input type="text"/></li>
                            })}
                        </ul>
                        <button onClick={this.addPerson}>Add Person</button>
                    </div>
                    
                )
            }
            
            addPerson = () => {
                const newPerson = {
                    id: '0100',
                    name: 'Lily',
                    age: 14
                } 
                this.setState({
                    persons:[
                        newPerson, ...this.state.persons
                    ]
                })
            }
        }

        ReactDOM.render(<Personlist/>, document.querySelector('#app'))
    </script>
</body>

</html>